<template>
  <div style="background-color: white">
    <IntroPic :picture="pic" title="我 的 借 阅"></IntroPic>

    <div style="margin-left: 10%;margin-right: 10%;margin-top: 30px;">
      <el-row style="font-size: 18px;font-weight: bold;color: #797979">
        <el-col :span="7">图书</el-col>
        <el-col :span="4">借阅时间</el-col>
        <el-col :span="3">借阅期限</el-col>
        <el-col :span="4">归还时间</el-col>
        <el-col :span="3">状态</el-col>
        <el-col :span="3">备注</el-col>
      </el-row>
        <Null v-if="borrowList.length === 0"></Null>
      <div v-loading="loading"
           element-loading-text="数据正在加载..."
           v-for="item in borrowList">
        <router-link :to="{path:'/borrowDetail',query:{id:item.borrowId}}">
          <BorrowCart :my-data="item" style="margin-top: 10px;"></BorrowCart>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script setup>
import IntroPic from "../Slither/IntroPic.vue";

import OrderCart from "../Slither/OrderCart.vue";
import {ref} from "vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import BorrowCart from "../Slither/BorrowCart.vue";
import {useRouter} from "vue-router";
import Null from "../Composite/Null.vue";
const router = useRouter();

let loading = ref(false)

let pic = ref('')
const getPic = ()=>{
  axios.get('/pic/borrow').then(res => {
    //console.log(res.data.data);
    pic.value = res.data.data;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getPic();

let borrowList = ref([])
const getOrderList = ()=>{
  loading.value = true
  axios.get("/borrow/list").then((res)=>{
    //console.log(res.data.data);
    borrowList.value = res.data.data;
    loading.value = false
  }).catch(error => {
    loading.value = false
    ElMessage.info("请你先登录")
    router.push("/login")
  })
}
getOrderList();


</script>

<style scoped>
a{
  text-decoration: none;
}
</style>
